
import React, { Component } from 'react';
import { Input, Table, Select, message,Tag, Button} from 'antd';
import './modal.css';
import PropTypes from 'prop-types';
import {getWorkshop } from '../../utils/storageUtils';
import {reqWorkshopSearchByOrgid,reqOrgUserByName,reqOrgUserByMobile,reqOrgUserByWspid,reqWorkUserList } from '../../api';

const { Search } = Input;
const { Option } = Select;

 const workUserList1  = [{
  user_mobile: '17726354839',
  user_name: '郭德纲',
  org:{
    org_id:"org1", 
    org_name:'组织1',
    org_pid:'111'
  },
  ws:{
    ws_id:"ws1",
    ws_pid:"org1",
    ws_name:"工区1"
  }
},{
  user_mobile: '177263544448',
  user_name: '郭麒麟',
  org:{
    org_id:"org1",
    org_name:'组织1',
    org_pid:'111'
  },
  ws:{
    ws_id:"ws1",
    ws_pid:"org1",
    ws_name:"工区2"
  }
},{
  user_mobile: '177263544447',
  user_name: '郭麒麟',
  org:{
    org_id:"org1",
    org_name:'组织1',
    org_pid:'111'
  },
  ws:{
    ws_id:"ws1",
    ws_pid:"org1",
    ws_name:"工区1"
  }
},{
  user_mobile: '177263544446',
  user_name: '郭麒麟',
  org:{
    org_id:"org1",
    org_name:'组织1',
    org_pid:'111'
  },
  ws:{
    ws_id:"ws1",
    ws_pid:"org1",
    ws_name:"工区2"
  }
},{
  user_mobile: '177263544445',
  user_name: '郭麒麟',
  org:{
    org_id:"org1",
    org_name:'组织1',
    org_pid:'111'
  },
  ws:{
    ws_id:"ws1",
    ws_pid:"org1",
    ws_name:"工区1"
  }
},{
  user_mobile: '177263544444',
  user_name: '郭麒麟',
  org:{
    org_id:"org1",
    org_name:'组织1',
    org_pid:'111'
  },
  ws:{
    ws_id:"ws1",
    ws_pid:"org1",
    ws_name:"工区2"
  }
},{
  user_mobile: '177263544443',
  user_name: '郭麒麟',
  org:{
    org_id:"org1",
    org_name:'组织1',
    org_pid:'111'
  },
  ws:{
    ws_id:"ws1",
    ws_pid:"org1",
    ws_name:"工区1"
  }
},{
  user_mobile: '177263544442',
  user_name: '郭麒麟',
  org:{
    org_id:"org1",
    org_name:'组织1',
    org_pid:'111'
  },
  ws:{
    ws_id:"ws1",
    ws_pid:"org1",
    ws_name:"工区2"
  }
},{
  user_mobile: '177263544441',
  user_name: '郭麒麟',
  org:{
    org_id:"org1",
    org_name:'组织1',
    org_pid:'111'
  },
  ws:{
    ws_id:"ws1",
    ws_pid:"org1",
    ws_name:"工区1"
  }
},{
  user_mobile: '177263544440',
  user_name: '郭麒麟',
  org:{
    org_id:"org1",
    org_name:'组织1',
    org_pid:'111'
  },
  ws:{
    ws_id:"ws1",
    ws_pid:"org1",
    ws_name:"工区2"
  }
}]

class AddWorkuserForm extends Component {
  static propTypes = {
    setForm: PropTypes.func.isRequired
  }
  state = {
    selectedRowKeys: [], // 选中项的index
    selectedRows:[],  // 选中项的内容
    wsList:[],
    workUserList:[],
    searchType:'name_search',
    loading: false,
  }

  formRef = React.createRef(); 

  handleSearchType = (e) => {  // 修改查找类型
    this.setState({
      searchType:e
    })
  }
  showSearchByType = (searchType) => {  // 根据查找类型显示不同的搜索框
    if(searchType === 'name_search'){
      return (
        <Search 
          placeholder="根据姓名搜索" 
          size="middle"
          onSearch={(value) => this.handleNameSearch(value)} 
          style={{ width: 170 }} 
          loading={this.state.loading}
        />
      )
    }else if(searchType === 'mobile_search'){
      return (
        <Search
          style={{ width: 170 }}
          placeholder="根据手机号搜索"
          size="middle"
          onSearch={(value) => this.handleMobileSearch(value)}
          loading={this.state.loading}
        />
      )
    } 
  }

  handleNameSearch = async(value) => {   // 按姓名查找 
    const user_name = value;
    const ws_pid = getWorkshop().ws_pid;
    const ws_id = getWorkshop().ws_id;
    this.setState({loading: true});
    const result = await reqOrgUserByName(user_name,ws_id,ws_pid); 
    console.log("用户姓名查找组织内用户",result); 
    this.setState({loading: false});
    if(result.code === 200){
      const workUserList = result.data;  // 获取data数据
      this.setState({   // 更新状态
        workUserList 
      })
    }else{
      message.error('获取失败!');   
    } 
  };

  handleMobileSearch = async(value) => {   // 按手机号查找 
    const user_mobile = value;
    const ws_pid = getWorkshop().ws_pid;
    const ws_id = getWorkshop().ws_id;
    this.setState({loading: true});
    const result = await reqOrgUserByMobile(user_mobile,ws_id,ws_pid);
    console.log("用户手机号查找组织内用户",result); 
    this.setState({loading: false});
    if(result.code === 200){
      const workUserList = result.data;  // 获取data数据
      this.setState({   // 更新状态
        workUserList 
      })
    }else{
      message.error('获取失败!');
    } 
  };


  initColumns = () => {      //初始化 表格的 列  vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
    this.columns = [
      { title: '姓名', dataIndex: 'user_name', key: 'user_name', 
        sorter: {
          compare: (a,b)=>a.user_name.localeCompare(b.user_name),   //中文排序参照函数 String.prototype.localeCompare()
        },
      },
      { title: '所属组织', dataIndex: 'org_name', key: 'org_name', },
      { title: '电话', dataIndex: 'user_mobile', key: 'user_mobile', },
    ];
  };
 

  getUserList = async() => {  // 根据 组织id（工区pid） 获取 组织内用户信息列表 ?
    const ws_id = getWorkshop().ws_id;
    const ws_pid = getWorkshop().ws_pid;
    this.setState({loading: true});
    const result = await reqOrgUserByWspid(ws_id,ws_pid);
    //console.log("组织id获取组织内全部用户",result); 
    this.setState({loading: false})
    if(result.code === 200){
      const workUserList  = result.data; 
      workUserList .map((item,index) => {   
        workUserList [index]['org_name'] = item.org.org_name;
      })
      this.setState({
        workUserList 
      })
    };       
  };

  getWsList = async() => {   // 获取可调动的全部工区（所在组织下的所有工区）
    const ws_pid = getWorkshop().ws_pid;
    this.setState({ loading: true })
    const result = await reqWorkshopSearchByOrgid(ws_pid);
    this.setState({loading: false});
    // console.log("获取工区",result)
    const wsList = result.data;  
    this.setState({
      wsList
    })
  }

  onSelectChange = (selectedRowKeys,selectedRows) => {  // 选中时触发
    console.log('选中调入的用户 ', selectedRowKeys,selectedRows);
    this.setState({ 
      selectedRowKeys,
      selectedRows
    },() => {
      this.props.setForm(this.state.selectedRows);  // 将选中的信息 传给 父组件
    });
  };

  componentWillMount() {
    this.initColumns();
    this.getWsList();
  }
  
  componentDidMount() {
    this.getUserList(); 
  }

  render() {
    const {loading,searchType,workUserList,selectedRowKeys} = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange, 
    };
    
    return (
      <div className='add-workuser-form'>
        <div className='add-workuser-header'>
          <Select
            className='add-workuser-dropdown' 
            showSearch
            defaultValue="name_search"
            onChange={(e) => this.handleSearchType(e)}  // 返回选中项的value值 
          >
            <Option value='name_search'>根据姓名查找</Option>
            <Option value='mobile_search'>根据手机号查找</Option>
          </Select>
          {this.showSearchByType(searchType)}
          <Button className='add-workuser-button' type="primary" onClick={this.getUserList}>重置</Button>
        </div>
        
        <div className='user-mgt-content'>
          <Table
            columns={this.columns}
            dataSource={workUserList } 
            rowSelection={rowSelection}
            rowKey={(record,index) => index}
            size='small'
            loading={loading}  
            pagination={false} 
            locale = {{
              cancelSort:'点击取消排序',
              triggerAsc:'点击升序',
              triggerDesc:'点击降序'
            }}  
          />
        </div>
      </div>
    )
  }
}

export default AddWorkuserForm;




 
